<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="lib/layui/css/layui.css" />
<script type="text/javascript" src="lib/layui/layui.js"></script>
</head>
<body>
	<div>
		<form style="margin-left: 400px" class="layui-form" action=""
			onsubmit="return false;">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-inline">
						<select id="state" name="state" lay-filter="aihao">
							<option value=""></option>
							<option value="待付款">待付款</option>
							<option value="待发货">待发货</option>
							<option value="待收货">待收货</option>
							<option value="待评价">待评价</option>
						</select>
					</div>
					<div class="layui-input-inline">
						<button type="submit" class="layui-btn" lay-submit=""
							lay-filter="demo1">搜索</button>
					</div>
					<a class="layui-btn layui-btn-small"
						style="line-height: 1.6em; margin-top: 3px; float: right"
						href="javascript:location.replace(location.href);" title="刷新">
						<i class="layui-icon" style="line-height: 30px">ဂ</i>
					</a>
				</div>
			</div>
		</form>
	</div>
	<div id="div_product" style="display: none;">
		<form id="fm_product" lay-filter="fm_product" class="layui-form"
			action="">
			<div class="layui-form-item">
				<label class="layui-form-label">订单编号</label>
				<div class="layui-input-block">
					<input readonly="readonly" name="id" class="layui-input"
						type="text" placeholder="" autocomplete="off" lay-verify="title">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-block">
					<input readonly="readonly" id="user_name" name="user_name"
						class="layui-input" type="text" placeholder="" autocomplete="off"
						lay-verify="title">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品名称</label>
				<div class="layui-input-block">
					<input readonly="readonly" id="p_name" name="p_name"
						class="layui-input" type="text" placeholder="" autocomplete="off"
						lay-verify="title">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">物流单号</label>
					<div class="layui-input-inline">
						<input name="wuliudh" class="layui-input" type="tel"
							autocomplete="off">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">物流公司</label>
					<div class="layui-input-inline">
						<select id="wuliugs" name="wuliugs" lay-filter="aihao">
							<option value=""></option>
							<option value="顺丰快递">顺丰快递</option>
							<option value="天天快递">天天快递</option>
							<option value="韵达快递">韵达快递</option>
							<option value="圆通快递">圆通快递</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">运费</label>
					<div class="layui-input-inline">
						<input name="yunfei" class="layui-input" type="tel" id="yunfei"
							autocomplete="off">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-inline">
						<select id="state" name="state" lay-filter="aihao">
							<option value=""></option>
							<option value="待付款">待付款</option>
							<option value="待发货">待发货</option>
							<option value="待收货">待收货</option>
							<option value="待评价">待评价</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" id="submit_add" type="submit"
						lay-filter="add" lay-submit="">立即提交</button>
				</div>
			</div>
		</form>
	</div>

	<table id="demo" lay-filter="test"></table>
	<script type="text/html" id="barDemo">
		{{#  if(d.state =="待发货"){ }}
             <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="fahuo">待发货</a>
    	{{#  } }}
    	{{#  if(d.state =="待付款"){ }}
             	<a class="layui-btn layui-btn-warm layui-btn-sm" lay-event="fahuo">待付款</a>
    	{{#  } }}
    	{{#  if(d.state =="待评价"){ }}
             	<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="fahuo">待评价</a>
    	{{#  } }}
    	{{#  if(d.state =="待收货"){ }}
             	<a class="layui-btn layui-btn-sm" lay-event="fahuo">待收货</a>
    	{{#  } }}
	</script>
	<script>
layui.use(['table','layer','form','laydate'], function(){
  var table = layui.table;
  var layer = layui.layer;
  var form = layui.form;
  var $ = layui.$;
  var laydate = layui.laydate;
	  //第一个实例
	  table.render({
	    elem: '#demo'
	   	,id: 'Tableone'
	    ,url: '../getAdminOrder' //数据接口
	    ,page: true //开启分页
	    ,cols: [[ //表头
	      {field: 'id', title: '订单编号',sort: true, fixed: 'left'}
	      ,{field: 'order_num', title: '商品数量'}
	      ,{templet: '<div>{{d.user.user_name}}</div>', title: '用户名'}
	      ,{templet: '<div>{{d.user.user_tel}}</div>',title: '用户电话'}  
	      ,{field: 'shijian',title: '下单时间' ,templet:"<div>{{layui.util.toDateString(d.shijian)}}</div>"}
	      ,{templet: '<div>{{d.product.p_name}}</div>', title: '商品名称'}
	      ,{fixed: 'right',title: '状态选择', width:190, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
	    ]]
	  });
	  form.on('submit(demo1)',function(data){
		  table.reload('Tableone',{
			  where: { //设定异步数据接口的额外参数，任意设
				  state: $("#state").val()
			  }
			  ,page: {
			    curr: 1 //重新从第 1 页开始
			  }
		});
		  return false;
	  });
	  laydate.render({
		    elem: '#asd' //指定元素
		  });
	  form.on('submit(add)',function(){
		  $.post("../setAdminOrder",$("#fm_product").serialize(),function(res){
			  layer.msg(res.msg);
			  if (res.code == "0") {
				layer.closeAll();
				table.reload("Tableone");
			}
		  },"json");
		  return false;
	  });
	  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
		  var data = obj.data; //获得当前行数据
		  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		  var user_tel=data.user.user_tel;
		  var user_name=data.user.user_name;
		  var p_name=data.product.p_name;
		  console.log(obj); 
		  if(layEvent === 'detail'){ //查看
			  $("#submit_add").hide();
			  form.val("fm_product",data); 
			  $("#user_tel").val(user_tel);
			  $("#user_name").val(user_name);
			  $("#p_name").val(p_name);
			  layer.open({
					 type:1,
					 content:$("#div_product"),
					 area:['600px','600px']    
				  });
		  } else if(layEvent === 'fahuo'){ //编辑
			  $("#submit_add").show();
			  form.val("fm_product",data);
			  $("#user_name").val(user_name);
			  $("#p_name").val(p_name);
			  layer.open({
					 type:1,
					 content:$("#div_product"),
					 area:['450px','600px']      
				  });
		  }
		});
	  
	});
</script>
</body>
</html>